<template>
  <div class='chat-panel'>
    <div class='notice-warp'>
      <em class='iconfont icon-gonggao'></em>
      <span class='notice-gg'>公告：</span>
      <span class='notice-content'>整点满血复活</span>
    </div>
    <div class='tab-warp'>
      <div class='tab-head'>
        <span class='tab-head-item'>贡献榜</span>
        <span class='tab-head-item active'>成就榜</span>
        <span class='tab-head-item'>贵宾（999）</span>
      </div>
      <div class='tab-content'>
        tab内容
      </div>
    </div>
    <div class='chat-list-warp' id="chat-list-warp">
      <ul class="chat-room-list">
        <!--        <li class="msg-item">
                  <p style="color:#3c0">
                    系统消息：管理员依法对聊天内容进行24小时巡查，禁止传播违法违规、封建迷信、暴力血腥、低俗色情、招嫖诈骗、违禁品等不良信息，坚决维护青少年群体精神文明健康。请勿轻信各类招聘征婚、代练代抽、刷钻、购买礼包码、游戏币、电商贩卖等广告信息或私下交易等信息，且以免上当受骗。</p>
                </li>
                <li class="msg-item">
                  <div class="msg-normal">
                    <span class='color-o'>[我]</span>
                    <span class="name J_userMenu" title="点击查看个人信息">Dada</span>
                    <span class="colon">:</span>
                    <span class="msg">fdasjfdjaksljflkdsajflkfdasjfd</span>
                  </div>
                </li>
                <li class="msg-item">
                  <div class="msg-normal">
                    <span class="name J_userMenu" title="点击查看个人信息">是小七咯</span>
                    <span class="colon">:</span>
                    <span class="msg">不限制技术上面是我v 记得截图哦！</span>
                  </div>
                </li>-->

        <li class="msg-item" v-for="item in msgList">
          <p style="color:#3c0" v-if="item.type == 1">
            {{
              item.userName
            }}：管理员依法对聊天内容进行24小时巡查，禁止传播违法违规、封建迷信、暴力血腥、低俗色情、招嫖诈骗、违禁品等不良信息，坚决维护青少年群体精神文明健康。请勿轻信各类招聘征婚、代练代抽、刷钻、购买礼包码、游戏币、电商贩卖等广告信息或私下交易等信息，且以免上当受骗。</p>
          <div class="msg-normal" v-if="item.type == 2">
            <span class='color-o' v-if="item.userId == myId">[我]</span>
            <span class="name J_userMenu" title="点击查看个人信息">{{ item.userName }}</span>
            <span class="colon">:</span>
            <span class="msg">{{ item.msg }}</span>
          </div>
        </li>

      </ul>
    </div>
    <div class='send-msg-warp'>
      <div class='send-warp'>
        <textarea id="input-warp" class='input-warp' placeholder="请输入" v-model="sendText"></textarea>
        <div class='send-btn' @click="sendMsg">发送</div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {useGameStore} from "../../store";
import {Message} from "../../types";
import {ElMessage} from 'element-plus'


let gameState = useGameStore();

let myId = ref("0001");
let myName = ref("测试用户");
let msgList = ref(<Message>[]);
let sendText = ref("");
msgList.value.push({
  type: 1,
  userId: '9999',
  userName: '系统消息',
  msg: '管理员依法对聊天内容进行24小时巡查，禁止传播违法违规、封建迷信、暴力血腥、低俗色情、招嫖诈骗、违禁品等不良信息，坚决维护青少年群体精神文明健康。请勿轻信各类招聘征婚、代练代抽、刷钻、购买礼包码、游戏币、电商贩卖等广告信息或私下交易等信息，且以免上当受骗。'
});
let t = '和某些人打交道，能让你感觉良好，因为，他身上带有正能量，和这样的人交往能将正能量传递给你，令你感染到那种积极快乐的感觉。而另一些人则相反，因为他身上负能量过多，不断地向你传递消极悲观的情绪。';
msgList.value.push({type: 2, userId: '0001', userName: myName, msg: t});
msgList.value.push({type: 2, userId: '0002', userName: myName, msg: t});
msgList.value.push({type: 2, userId: '0002', userName: myName, msg: t});
msgList.value.push({type: 2, userId: '0001', userName: myName, msg: t});
msgList.value.push({type: 2, userId: '0002', userName: myName, msg: t});
msgList.value.push({type: 2, userId: '0002', userName: myName, msg: t});


defineProps<{}>()

let sendMsg = () => {
  if (!sendText.value.trim()) {
    return ElMessage.error('请输入文字后再发送');
  }
  msgList.value.push({
    type: 2, userId: myId.value, userName: myName, msg: sendText.value, sendTime: ''
  })
  sendText.value = "";
  setTimeout(() => {
    let warp = document.getElementById("chat-list-warp");
    warp.scrollTop = warp.scrollHeight;
  }, 1);
}
onMounted(() => {
  document.getElementById("input-warp").addEventListener('keydown', (e) => {
    let {keyCode} = e;
    if (keyCode == 13) {
      sendMsg()
      e.preventDefault()
    }
    e.stopPropagation();
  })
})
</script>

<style scoped lang="scss">

</style>
